import React from "react";
import ReactDOM from 'react-dom'
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Home from './menu/home.jsx'
import About from './menu/about.jsx'
import Topics from './menu/topics.js'
import Main from './main.js'


function BasicExample() {   // 使用函数也可以
    return (
        <Router>

            <Main>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/about" component={About}/>
                    <Route path="/topics" component={Topics}/>
                </Switch>
            </Main>
        </Router>
    );
    {/* Router 路由的 标签，必须在此标签里 BrowserRouter ,todo 当前是路由和HTML分开，也可以不分开，看topics文件*/
    }
    {/* todo Main是网页文字组件，注意要包含  {this.props.children} ，是填充路由 返回 文字的地方 */
    }
    {/* Route exact 是精确匹配， /about 也可以匹配 /, 要加精确匹配 */
    }
    {/* Switch 匹配到一个不往下匹配，不加则继续往下 */
    }
    {/* todo 嵌套路由从  ，匹配到1级=> 匹配2级  topics.jsx ,*/
    }
}


ReactDOM.render(
    <BasicExample/>,
    document.getElementById("example")
)


export default BasicExample;